<template>
    <!--音乐开关和音乐-->
    <div class="music-btns" v-if="musicUrl && musicUrl != '' && musicUrl != 'null'">
        <img class="new-open-music" v-lazy="staticImageUrl('images/new_year_openMusic.png')">
        <img class="new-close-music" style="display:none;" src="../../../assets/images/new_year_closeMusic.png">
    </div>
</template>

<script>
    let wx = require('weixin-js-sdk');
    export default {
        props: {musicUrl: {type: String}, componentIndex: {type: Number}},
        mounted: function () {
            console.log("musicUrl:" + this.musicUrl)
            if (this.musicUrl != null && this.musicUrl != '' && this.musicUrl != 'null') {
                this.playMusic(this.musicUrl);
            }
        },
        methods: {
            playMusic: function (url) {
                let oaudio = document.createElement("audio");
                let onav = document.getElementsByClassName('music-btns')[0];
                let newOpenMusic = document.getElementsByClassName('new-open-music')[0];
                let newCloseMusic = document.getElementsByClassName('new-close-music')[0];
                oaudio.setAttribute("loop", "loop");
                oaudio.setAttribute("src", url);
                oaudio.id = "audioGxfc";
                onav.appendChild(oaudio);

                newCloseMusic.onclick = function a() {
                    oaudio.play();
                    newOpenMusic.style.display = "block"
                    newCloseMusic.style.display = "none"
                };
                newOpenMusic.onclick = function () {
                    oaudio.pause();
                    newCloseMusic.style.display = "block"
                    newOpenMusic.style.display = "none"
                };
                if (this.componentIndex == 1 || this.componentIndex == 2) {
                    function wxAutoPlayAudio() {
                        wx.config({
                            debug: false,
                            appId: '',
                            timestamp: 1,
                            nonceStr: '',
                            signature: '',
                            jsApiList: ''
                        });
                        wx.ready(function () {
                            oaudio.play();
                        })
                    }

                    wxAutoPlayAudio();
                } else {
                    $('.music-btns').hide();
                }
            }
        }
    }
</script>

<style scoped>
    .new-close-music,.new-open-music{
        position:absolute;
        top:.39rem;
        right:.2rem;
        width:.27rem;
        z-index:1039
    }
    .new-open-music{
        -webkit-animation-name:skyset2;
        -webkit-animation-duration:4s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear
    }
    .music-btns{
        position:relative;
        pointer-events: auto!important;
    }
    @keyframes skyset2{
        0%{
            transform:rotate(0)
        }
        100%{
            transform:rotate(360deg)
        }
    }
</style>
